<template>
  <el-form
    :model="baseFroms"
    :rules="rules"
    label-width="100px"
    size="small"
    @submit.native.prevent="
      () => {
        return;
      }
    "
  >
    <!-- 行1 -->
    <el-row>
      <el-col :span="8">
        <el-form-item label="表类型" prop="tableType">
          <el-select
            style="width: 100%"
            v-model="baseFroms.tableType"
            placeholder="请选择表类型"
          >
            <el-option label="单表" :value="1"> </el-option>
            <el-option label="主表" :value="2"> </el-option>
            <el-option label="附表" :value="3"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="表名" prop="tableName">
          <el-input v-model="baseFroms.tableName" placeholder="请输入表名" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="表描述" prop="tableDescribe">
          <el-input
            v-model="baseFroms.tableDescribe"
            placeholder="请输入表描述"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 行2 -->
    <el-row>
      <el-col :span="8">
        <el-form-item label="表单分类" prop="tableClassify">
          <el-select
            style="width: 100%"
            v-model="baseFroms.tableClassify"
            placeholder="请选择表单分类"
          >
            <el-option label="请选择表单分类" value=""> </el-option>
            <el-option
              v-for="(item, index) in []"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="是否分页" prop="isPaging">
          <el-select
            style="width: 100%"
            v-model="baseFroms.isPaging"
            placeholder="请选择"
          >
            <el-option label="是" :value="1"> </el-option>
            <el-option label="否" :value="0"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="是否树" prop="isTree">
          <el-select
            style="width: 100%"
            v-model="baseFroms.isTree"
            placeholder="请选择"
          >
            <el-option label="是" :value="1"> </el-option>
            <el-option label="否" :value="0"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "GenerateBaseForm",

  props: {
    // 表单参数
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      // 表单校验
      rules: {
        tableName: [
          {
            validator: this.rulesFunction,
            trigger: "change",
            required: true,
          },
        ],
        tableDescribe: [
          {
            validator: this.rulesFunction,
            trigger: "change",
            required: true,
          },
        ],
      },
    };
  },

  computed: {
    baseFroms: {
      get() {
        return this.form;
      },
      set(value) {
        this.$emit("update:form", value);
      },
    },
  },

  mounted() {},

  methods: {
    // 表单校验规则
    rulesFunction(rule, value, callback) {
      let filed = rule.field.split(".");
      if (!filed[filed.length - 2] || filed[filed.length - 2] != 0) {
        switch (filed[filed.length - 1]) {
          case "tableName":
            this.tableNameRule(rule, value, callback);
            break;

          case "tableDescribe":
            if (!value || value.trim() === "") {
              callback(new Error("表描述不能为空"));
            } else {
              callback();
            }
            break;

          default:
            break;
        }
      } else {
        callback();
      }
    },
    // 表名校验
    tableNameRule(rule, value, callback) {
      // 匹配是否包含中文
      const regex = /[\u4e00-\u9fa5]/;
      // 匹配除字母、数字和_和$之外的特殊字符
      const regex1 = /[^a-zA-Z0-9_$]/;
      // 校验字段
      if (value === null || value.trim() === "") {
        callback(new Error("表名不能为空"));
      } else if (value.includes(" ")) {
        callback(new Error("表名不能包含空格"));
      } else if (regex.test(value)) {
        callback(new Error("不允许输入中文"));
      } else if (regex1.test(value)) {
        callback(new Error("表名只允许字母、数字、_、$"));
      } else {
        callback();
      }
    },
  },
};
</script>
